<template>
	<div>
		<el-button @click="addActivity">新增活动</el-button>
		<el-form ref="form" :model="form">
			<div v-for="(item, index) in form.list" :key="index">
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item
							class="form-item"
							style=""
							label="关键字"
							:prop="'list.' + index + '.key'"
							:rules="{
								required: true,
								message: 'key不能为空'
							}"
						>
							<el-input v-model="item.key"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="form-item" label="活动名称">
							<el-input v-model="item.name"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item
					class="form-item"
					:rules="{
						required: true,
						message: 'amount不能为空',
						trigger: 'blur'
					}"
				>
					<div>补贴金</div>

					<template v-for="(itemA, indexA) in item.amountList">
						<el-input-number
							:key="indexA"
							v-model="itemA.value"
							controls-position="right"
							:min="0"
							:step="1"
							:precision="0"
							:max="9999999"
						></el-input-number>
						<el-button
							style="margin:0 10px"
							:key="`${indexA}a`"
							type="text"
							@click.prevent="removeDomain(index, indexA)"
							>删除</el-button
						>
					</template>
					<el-button style="margin-left:15px;margin-top:6px" @click="addDomain(index)"
						>添加</el-button
					>
				</el-form-item>
				<el-button v-if="form.list.length > 1" @click="delActivity(index)">删除</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'active-box',
	data() {
		return {
			list: [
				{
					key: '',
					name: '',
					amountList: [
						{
							value: ''
						}
					]
				}
			],
			form: {
				list: [
					{
						key: '',
						name: '',
						amountList: [
							{
								value: ''
							}
						]
					}
				]
			}
		};
	},
	props: {
		value: null
	},
	mounted() {
		if (this.value.activity) {
			let val = JSON.parse(this.value.activity);
			val.map(item => {
				item.amountList = item.amountList.split(',').map(m => {
					return {
						value: m
					};
				});
			});
			this.form.list = val;
		}
	},
	watch: {
		'form.list': {
			handler(val) {
				this.$emit('input', val);
			},
			immediate:true
		}
	},

	methods: {
		addActivity() {
			this.form.list.push({
				key: '',
				name: '',
				amountList: [
					{
						value: ''
					}
				]
			});
		},
		delActivity(i) {
			if (this.form.list.length > 1) {
				this.form.list.splice(i, 1);
			}
		},
		removeDomain(i, n) {
			if (this.form.list[i].amountList.length > 1) {
				this.form.list[i].amountList.splice(n, 1);
			}
		},
		addDomain(i) {
			this.form.list[i].amountList.push({
				value: ''
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.form-item {
	margin-bottom: 30px;
}
.amount-li {
	width: 100px;
}
</style>
